<!--
 * @Author: your name
 * @Date: 2020-11-19 16:13:02
 * @LastEditTime: 2021-03-05 17:14:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\common\list.vue
-->
<template>
  <div class="list">
    <ul class="list_product mtb30">
      <li class="list_product_box p15 mb20 spacing pointer s4" v-for="(item, index) of productData" :key="'product' + index">
          <div class="p15 list_product_link">
            <ul class="boxImg">
              <template v-if="item.imgs && item.imgs.length">
                <li
                  class="li liImg"
                  :class="{ productActive: i === 0 }"
                  v-for="(img, i) of item.imgs"
                  :key="'img' + i"
                >
                  <nuxt-link :to="{path: '/productDetail', query: { id: item.id }}">
                    <img class="img" :src="img.url ? img.url : require('~/assets/image/defaultProduct.jpg')" alt="" />
                  </nuxt-link>
                </li>
              </template>
            </ul>
            <div class="content">
              <h3 class="content_title ptb10">{{ item.name }}</h3>
              <ul class="content_ul ptb10" ref="li_radio">
                <template v-if="item.options && item.options.length">
                  <li
                    :class="{ optionAcitve: 0 === j }"
                    class="li liRadio"
                    v-for="(option, j) of item.options"
                    :key="'option' + j"
                    @click="switchImg(index, j)"
                  >
                    <img class="img" :src="option.img ? option.img : require('~/assets/image/defaultColor.jpg')" alt="" />
                  </li>
                </template>
              </ul>
              <div class="content_price ptb10 size16 b text_c relative">
                <span class="price">
                  {{$t('$')}} {{ item.price }}
                  <div
                    v-if="item.price !== item.finalPrice"
                    class="finalPrice"
                  >
                    {{ item.finalPrice }}
                  </div>
                </span>
                <div class="addFavorite" @click="addFavorite(item)">
                  <i class="iconfont icon-aixin1"></i>
                </div>
              </div>
            </div>
            <div class="tryBox none">
              <el-button type="primary" class="tryBox_on s6" @click="showTry()">{{$t("Try On")}}</el-button>
              <el-button type="success" class="tryBox_shop s6">{{$t("Shop Now")}}</el-button>
            </div>
          </div>
      </li>
    </ul>
    <div class="showMore ptb10">
      <el-button type="primary" @click="showMore()" v-if="curPage < total">{{$t('Show More')}}</el-button>
      <el-button type="primary" v-else>{{$t('No Data')}}</el-button>
    </div>
    <el-dialog title="" :visible.sync="dialogTry" width="780px" class="tryDialog">
      <try-on :initData="dialogTry" :list="bannerImgList" :glassesList="glassesList"></try-on>
    </el-dialog>
  </div>
</template>

<script>
import TryOn from '~/components/common/TryOn'
export default {
  data() {
    return {
      curPage: 0,
      dialogTry: false,
      glassesList: [
        {
          id: 1,
          imgUrl: require('~/assets/image/tryGlasses/1.png')
        },
        {
          id: 2,
          imgUrl: require('~/assets/image/tryGlasses/2.png')
        },
        {
          id: 3,
          imgUrl: require('~/assets/image/tryGlasses/3.png')
        },
        {
          id: 4,
          imgUrl: require('~/assets/image/tryGlasses/4.png')
        }
      ],
      bannerImgList: [
        {
          banner_image: require("~/assets/image/tryHead/1.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/2.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/3.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/4.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/5.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/7.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/8.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/9.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/10.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/11.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/12.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/13.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/14.jpg")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/1.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/2.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/3.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/4.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/5.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/6.jpg")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/7.jpg")
        }
      ]
    }
  },
  components: {
    TryOn
  },
  props: {
    productData: {
      type: [Object, Array],
      default: () => []
    },
    total: {
      type: Number,
      default: 10
    }
  },
  methods: {
    /**
     *@param:
     *@description: 显示试戴弹窗
     *@author: Mister Wang
     *@date: 2021-03-04 09:28:03
     */
    showTry() {
      this.dialogTry = true;
    },
    /*
     *@params: 
     *@description: 加载更多
     *@author: Mister Wang
     *@date: 2020-11-20 15:31:50
    */
    showMore() {
      if (this.curPage < this.total) {
        this.curPage++;
        this.$emit('loadMoreData', this.curPage);
      } else {

      }
    },
    /*
     *@params: index >> 颜色索引
     *@description: 切换当前图片
     *@author: Mister Wang
     *@date: 2020-11-20 14:47:17
    */
    switchImg(index, j) {
      const box = document.querySelectorAll('.list_product_box')[index];
      let radio = box.querySelectorAll('.liRadio');
      let img = box.querySelectorAll('.liImg');
      for (let i = 0; i < radio.length; i++) {
        radio[i].classList.remove('optionAcitve');
        img[i].classList.remove('productActive');
      }
      radio[j].classList.add('optionAcitve');
      img[j].classList.add('productActive');
    },
    /*
     *@params:  
     *@description: 添加喜爱
     *@author: Mister Wang
     *@date: 2020-11-20 16:15:29
    */
    addFavorite(item) {
      console.log('添加喜好 :>> ', item);
    },
  },
  destroyed () {
    // if(!this.mediaStreamTrack) return
    // // 关闭摄像头和侦测
    // this.mediaStreamTrack.srcObject.getTracks()[0].stop();
    // // 停止侦测
    // this.trackerTask.stop()
    // // 关闭摄像头
    // window.tracking.closeCamera()
  }
};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.list {
  &_product {
    @include flex();
    flex-wrap: wrap;
    &_box {
      min-height: 386px;
      &:nth-child(3n) {
        margin-right: 0 !important;
      }
      &:hover .list_product_link {
        border: 1px solid $ddd;
        box-shadow: 0px 0px 6px 2px #ccc;
        transition: all .3s;
        .addFavorite {
          display: block !important;
        }
        .tryBox {
          display: flex !important;
        }
      }
    }
    &_link {
      border: 1px solid transparent;
      display:block;
    }
    .boxImg {
      position: relative;
      height: 170px;
      overflow: hidden;
      .li {
        position: absolute;
        left: -$s100;
        top: 0;
        width: $s100;
        height: $s100;
        text-align: center;
        .img {
          width: $s100;
          height: $s100;
        }
      }
    }
    .content {
      &_title {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
      }
      &_ul {
        @include flex-center(center);
        .li {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          border: 1px solid $ddd;
          padding: 3px;
          cursor: pointer;
          margin-right: 5px;
          background: rgba(255, 255, 255, 0.1);
          .img {
            width: $s100;
            height: $s100;
            border-radius: 50%;
            vertical-align: unset !important;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
      &_price {
        .price {
          position: relative;
          text-align: center;
          .finalPrice {
            position: absolute;
            right: -50px;
            top: 0;
            font-weight: bold;
            color: $theme;
          }
        }
        .addFavorite {
          position: absolute;
          right: 30px;
          top: 10px;
          display: none;
        }
      }
    }
  }
  .productActive {
    left: 0 !important;
    transition: all 0.5s;
  }
  .optionAcitve {
    border: 1px solid $c000 !important;
  }
}
.showMore {
  width: 100%;
  text-align: center;
}
.tryBox {
  justify-content: center;
}

.p15 {
  padding: 15px;
}

/* 横条样式
.tryAlert_right input[type=range] {
  -webkit-appearance: none;
  outline: none;
}
/* 拖动块的样式*/
/* .tryAlert_right input[type=range],
.tryAlert_right input[type=range]::-webkit-slider-runnable-track,
.tryAlert_right input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    outline: none;
} */
/* .tryAlert_right input[type=range]:focus,
.tryAlert_right input[type=range]:focus::-webkit-slider-thumb,
.tryAlert_right input[type=range]:focus::-webkit-slider-runnable-track,
.tryAlert_right input[type=range]:focus::-moz-range-thumb,
.tryAlert_right input[type=range]:focus::-moz-range-track,
.tryAlert_right input[type=range]:focus::-ms-thumb,
.tryAlert_right input[type=range]:focus::-ms-track{
    outline: none;
    border:0;
} */
/*Safari，Chrome和Opera*/
/* .tryAlert_right input[type=range]::-webkit-slider-thumb {
    background-color: #59C9FB;
    width: 25px;
    height: 25px;
    border: 2px solid white;
    border-radius: 50%;
    margin-top: -6px;
}
.tryAlert_right input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(to right,#59C9FB 0,#59C9FB 50%,white 0,white 100%);
    height: 12px;
    border-radius: 6px;
} */
/*firefox*/
/* .tryAlert_right input[type=range]::-moz-range-thumb {
    background-color: #59C9FB;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 50%;
    margin-top: -9px;
}
.tryAlert_right input[type=range]::-moz-range-track {
    background-color: white;
    height: 12px;
    border-radius: 6px;
}
.tryAlert_right input[type=range]::-moz-range-progress {
    background-color: #59C9FB;
    height: 12px;
    border-radius: 6px;
} */
/*IE*/
/* .tryAlert_right input[type=range]::-ms-thumb {
    background-color: #59C9FB;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 50%;
    margin-top: -9px;
}
.tryAlert_right input[type=range]::-ms-track {
    background-color: #59C9FB;
    height: 12px;
    border-radius: 6px;
}
.tryAlert_right input[type=range]::-ms-fill-lower {
    background-color: #59C9FB;
    height: 12px;
    border-radius: 6px;
}
.tryAlert_right input[type=range]::-ms-fill-upper {
    background-color: white;
    height: 12px;
    border-radius: 6px;
} */

</style>